<template>
  <div class="admin-module">
    <el-table
        :data="blogInfo.blogVisitList"
        border stripe
        :header-cell-style="tableHeaderStyle()"
        :cell-style="tableCellStyle()"
        :row-style="tableRowStyle()"
        style="width: 100%"
        class="card-item">
      <el-table-column type="index" align="center" width="50" />
      <el-table-column prop="ip" label="IP" align="center" min-width="10%"/>
      <el-table-column prop="os" label="平台" align="center" min-width="10%" />
      <el-table-column prop="browser" label="浏览器" align="center" min-width="10%" />
      <el-table-column prop="uri" label="路径" align="center" min-width="10%" />
      <el-table-column prop="title" label="博客标题" align="center" min-width="10%" />
      <el-table-column prop="visitTime" label="访问时间" align="center" min-width="10%" />
    </el-table>

    <el-pagination
        v-model:current-page="blogInfo.pageInfo.currentPage"
        :page-size="blogInfo.pageInfo.pageSize"
        :total="blogInfo.pageInfo.totalSize"
        layout="total, prev, pager, next"
        @change="changePageClick"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { IBlogVisit } from '@/types/blog.ts'
import { queryBlogVisitApi } from '@/apis/blog.ts'
import { tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'

const blogInfo = reactive({
  blogVisitList: [] as IBlogVisit[],
  pageInfo: {
    currentPage: 1,
    pageSize: 15,
    totalSize: 1
  }
})

onMounted(async () => {
  await queryBlogVisit()
})

/**
 * 切换页码
 * @param page 当前页码
 * @param pageSize 页码大小
 */
const changePageClick = async (page: number, pageSize: number) => {
  blogInfo.pageInfo.currentPage = page
  blogInfo.pageInfo.pageSize = pageSize
  await queryBlogVisit()
}

/**
 * 查看博客访问记录
 */
const queryBlogVisit = async () => {
  const { currentPage, pageSize } = blogInfo.pageInfo
  const result = await queryBlogVisitApi(currentPage, pageSize)
  blogInfo.blogVisitList = result.records
  blogInfo.pageInfo.totalSize = result.total
}
</script>
